<template>
    <div class="vp-raw">
        <ElEditTable v-model:data="data" ref="myTable">
            <ElEditTableColumn label="ID" prop="id" :is="ElInput" :rules="idRules"></ElEditTableColumn>
            <ElEditTableColumn label="性别" prop="gender" :is="ElSelect" :data="selectData" optionLabel="label"
                optionValue="value" :rules="genderRules">
            </ElEditTableColumn>
            <ElEditTableColumn label="操作" prop="operation">
                <template #default="{ row }">
                    <el-button type="text" @click="editRow(row)">编辑</el-button>
                </template>
            </ElEditTableColumn>
        </ElEditTable>

        <el-space>
            <ElButton type="primary" @click="toggleEditStatus()">{{ isEdit ? '保存': '编辑全部' }}</ElButton>
        </el-space>
    </div>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { ElEditTable, ElEditTableColumn } from "@howuse/element-plus-edit-table"
import { ElInput, ElSelect, ElButton, ElSpace } from "element-plus"
import { ref, unref } from 'vue';

const myTable = ref();
const isEdit = ref(false);

const idRules = [
    { required: true, message: '请输入ID', trigger: 'change' }
]
const genderRules = [
    { required: true, message: '请选择性别', trigger: 'change' }
]

const selectData = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

const data = ref([
    { id: 1, gender: 1 },
    { id: 2, gender: 2 },
])

function toggleEditStatus() {
    isEdit.value = !isEdit.value // isEdit 不是双向绑定，单向变化，此处同步操作
    unref(myTable).toggleEditStatus()
}

function editRow(row) {
    unref(myTable).toggleEditStatus(row)
}
</script>
<style scoped></style>